<!---->
<template>
  <div>
    <el-form :inline="true" :model="searchModel" class="demo-form-inline">
      <el-form-item label="角色名称">
        <el-input v-model="searchModel.searchItem.role_name" placeholder="角色名称"></el-input>
      </el-form-item>
      <el-form-item label="角色状态">
        <el-select v-model="searchModel.searchItem.role_status" placeholder="全部">
          <el-option label="全部" value></el-option>
          <el-option label="有效" value="1"></el-option>
          <el-option label="无效" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-button @click="Xianshu">搜索</el-button>
      <el-button @click="openRoleAdd">添加</el-button>
    </el-form>
    <el-table ref="filterTable" :data="pageModel.data" style="width: 100%">
      <el-table-column prop="role_id" label="角色ID"></el-table-column>
      <el-table-column prop="role_name" label="角色名称"></el-table-column>
      <el-table-column prop="role_status" label="状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.role_status === 1 ? 'primary' : 'success'"
            disable-transitions
          >{{scope.row.role_status==1?"有效":"删除"}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scopes">
          <el-button @click="openUpdate(scopes.row.role_id)" type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 如果pageIndex是在数组里，那一定要用数组名字印出来 -->
    <el-pagination
      @size-change="Xianshu"
      @current-change="Xianshu"
      :current-page.sync="searchModel.pageIndex"
      :page-sizes="[2, 4, 6, 8]"
      :page-size.sync="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageModel.total"
    ></el-pagination>

    <el-dialog
      :title="editModel.editType == 1 ? '角色添加' : '角色修改'"
      :visible.sync="editModel.isShowEdit"
    >
      <el-form ref="form" :model="editModel.roleInfo" :rules="editModel.rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色名称" :prop="editModel.roleInfo.role_name">
              <el-input v-model="editModel.roleInfo.role_name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角色状态">
              <el-switch
                v-model="editModel.roleInfo.role_status"
                active-text="有效"
                inactive-text="无效"
                :active-value="1"
                :inactive-value="2"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="角色权限">
              <el-tree
                ref="roleTree"
                show-checkbox
                :data="editModel.moduleData"
                node-key="module_code"
                :default-expanded-keys="editModel.openKeys"
                :default-checked-keys="editModel.roleInfo.roleModuleCode"
                :props="editModel.roleInfo.defaultProps"
              ></el-tree>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button
            type="primary"
            @click="editModel.editType == 1 ? roleAdd() : roleUpdate()"
          >{{ editModel.editType == 1 ? "立即创建" : "修改保存" }}</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageModel: {},

      searchModel: {
        searchItem: {
          role_name: null,
          role_status: null
        },
        PageIndex: 1,
        PageSize: 2
      },
      // 弹框显示内容
      editModel: {
        //from表单数据数组
        roleInfo: {
          roleModuleCode: [], //选中节点和打开节点
          role_status: 1
        },
        moduleData: [],

        openKeys: [], //默认打开节点
        isShowEdit: false,
        editType: 1,
        defaultProps: {
          children: "sonModules",
          label: "module_name"
        },
        rules: {
          role_name: [{ required: true, message: "请输入角色名" }]
        }
      }
    };
  },
  created() {
    this.Xianshu();
  },

  methods: {
    Xianshu() {
      this.$myaxios.post("RoleManager/SearchPage", this.searchModel).then(r => {
        this.pageModel = r.data;
      });
    },
    iniModuleData() {
      this.$myaxios.get("ModuleManager/GetModuleDbViewsAll").then(r => {
        this.editModel.moduleData = r.data;
      });
    },
    openRoleAdd() {
      this.editModel.isShowEdit = true;
      this.editModel.editType = 1;
      this.editModel.roleInfo = {
        roleModuleCode: []
      };
      this.editModel.openKeys = ["system_conter"];
      this.iniModuleData();
    },
    roleAdd() {
      this.editModel.roleInfo.roleModuleCode = [];
      var checkObj = this.$refs.roleTree.getCheckedNodes();
      checkObj.forEach(item => {
        this.editModel.roleInfo.roleModuleCode.push(item.module_code);
      });
      var halfCheckedKeys = this.$refs.roleTree.getHalfCheckedKeys(); //获取半选中节点

      halfCheckedKeys.forEach(item => {
        this.editModel.roleInfo.roleModuleCode.push(item);
      });
      this.$myaxios
        .post("RoleManager/RoleDbAdd", this.editModel.roleInfo)
        .then(r => {
          if (r.code == 1) {
            this.$message("添加成功");
            this.editModel.isShowEdit = false;
            this.Xianshu();
          }
        });
    },
    openUpdate(roleId) {
      this.$myaxios
        .get("RoleManager/GetRoleViewById", {
          params: {
            roleId: roleId
          }
        })
        .then(r => {
          this.iniModuleData();
          this.editModel.roleInfo = r.data;
          this.editModel.isShowEdit = true;
          this.editModel.editType = 2;
        });
    },
    roleUpdate() {
      this.editModel.roleInfo.roleModuleCode = [];

      var checkObj = this.$refs.roleTree.getCheckedNodes();
      console.log(checkObj);
      checkObj.forEach(item => {
        this.editModel.roleInfo.roleModuleCode.push(item.module_code);
      });
      var halfCheckedKeys = this.$refs.roleTree.getHalfCheckedKeys(); //获取半选中节点
      halfCheckedKeys.forEach(item => {
        this.editModel.roleInfo.roleModuleCode.push(item);
      });
      this.$myaxios
        .post("RoleManager/RoleDbUpdate", this.editModel.roleInfo)
        .then(r => {
          if (r.code == 1) {
            this.$message("修改成功");
            this.editModel.isShowEdit = false;
            this.Xianshu();
          }
        });
    }
  }
};
</script>
